<template>
  <div class="question-container">
    <el-card>
      <!-- 按钮  基础题库-->
      <div class="btn_wrapper">
        <el-button
          icon="el-icon-edit"
          @click="$router.push('new')"
          type="success"
          size="small"
          >新增试题</el-button
        >
      </div>
      <!-- 表单 -->
      <el-form label-width="80px" size="small">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select v-model="form.subjectID" style="width: 100%">
                <el-option
                  @change="changeSubject"
                  v-for="item in subjectArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select v-model="form.catalogID" style="width: 100%">
                <el-option
                  v-for="item in directoryArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="form.tags" style="width: 100%">
                <el-option
                  v-for="item in tagArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="form.keyword"></el-input> </el-form-item
          ></el-col>

          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="form.questionType" style="width: 100%">
                <el-option
                  v-for="item in questionTypeArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="form.difficulty" style="width: 100%">
                <el-option
                  v-for="item in diffArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="form.direction" style="width: 100%">
                <el-option
                  v-for="item in directionArr"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="form.creatorID" style="width: 100%">
                <el-option
                  v-for="item in userArr"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="form.remarks"></el-input> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="form.shortName"></el-input></el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select
                @change="handleCity"
                v-model="form.province"
                style="width: 48%; margin-right: 2%"
              >
                <el-option
                  v-for="item in cityArr"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
              <!-- 地区 -->
              <el-select
                v-model="form.city"
                style="width: 48%; margin-right: 2%"
              >
                <el-option
                  v-for="item in areaArr"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>

          <el-col :span="6">
            <el-form-item style="text-align: right">
              <el-button @click="clear()">清除</el-button>
              <el-button @click="search()" type="primary">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据记录 -->
      <el-alert
        :title="`数据一共 ${total} 条`"
        style="margin-bottom: 15px"
        type="info"
        class="alert"
        :closable="false"
        show-icon
      ></el-alert>
      <!-- 表格区域 -->
      <el-table :data="questions">
        <el-table-column
          label="试题编号"
          prop="number"
          width="120px"
        ></el-table-column>
        <el-table-column prop="subject" label="学科"> </el-table-column>
        <el-table-column prop="catalog" label="目录"> </el-table-column>
        <el-table-column prop="questionType" label="题型">
          <template #default="{ row }">
            {{
              questionType.find((item) => item.value === +row.questionType)
                .label
            }}
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干" width="280px">
          <template #default="{ row }">
            <div v-html="row.question"></div>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="180">
          <template #default="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度">
          <template #default="{ row }">
            {{
              difficulty.find((item) => item.value === +row.difficulty).label
            }}
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人"> </el-table-column>
        <el-table-column label="操作" width="180px">
          <template #default="{ row }">
            <el-button
              plain
              type="primary"
              size="small"
              circle
              icon="el-icon-view"
              @click="view(row)"
            ></el-button>
            <el-button
              plain
              type="success"
              size="small"
              circle
              @click="$router.push(`new?id=${row.id}`)"
              icon="el-icon-edit"
              title="修改"
            ></el-button>
            <el-button
              plain
              type="danger"
              size="small"
              circle
              icon="el-icon-delete"
              title="删除"
              @click="del(row)"
            ></el-button>
            <el-button
              plain
              type="warning"
              size="small"
              circle
              icon="el-icon-check"
              title="加入精选"
              @click="check(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="margin-top: 20px; text-align: right"
        background
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        :page-size="form.pagesize"
        :current-page="form.page"
        @current-change="handleCurrentChange"
        :page-sizes="[2, 4, 6, 8]"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </el-card>
    <!-- 预览 -->
    <questions-preview
      ref="questionPreview"
      :data="questionInfo"
    ></questions-preview>
  </div>
</template>

<script>
import QuestionsPreview from '../components/questions-preview'
import { simple as subjectList } from '@/api/hmmm/subjects'
import { simple as userList } from '@/api/base/users'
import { simple as tagList } from '@/api/hmmm/tags'
import { simple as directoryList } from '@/api/hmmm/directorys'
import { provinces as getCity, citys as getArea } from '@/api/hmmm/citys'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { list, remove, choiceAdd } from '@/api/hmmm/questions'
export default {
  components: {
    QuestionsPreview
  },
  data () {
    return {
      total: 0,
      questionInfo: {},
      questions: [],
      form: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 2
      },
      // 学科
      subjectArr: [],
      // 录入人
      userArr: [],
      // 目录
      directoryArr: [],
      // 标签选项
      tagArr: [],
      // 地区 当选择了城市的时候赋值
      cityArr: getCity(),
      areaArr: [],
      diffArr: difficulty,
      // 试题类型选项
      questionTypeArr: questionType,
      // 方向选项
      directionArr: direction,
      // 难度选项
      difficulty,
      // 试题类型选项
      questionType
    }
  },
  methods: {
    // 选择学科查询目录和标签的下拉选项数据
    async changeSubject (subjectID) {
      this.form.creatorID = null
      this.form.tags = null
      if (subjectID) {
        // 获取目录
        const { data: directoryArr } = await directoryList({ subjectID })
        this.directoryArr = directoryArr
        // 下拉选择
        const { data: tagArr } = await tagList({ subjectID })
        this.tagArr = tagArr
      } else {
        this.directoryArr = []
        this.tagArr = []
      }
    },
    clear () {
      // 循环遍历数组里的key，让值为空

      for (const key in this.form) {
        if (key !== 'page' && key !== 'pagesize') this.form[key] = null
      }
    },
    handleCity (cityName) {
      // 地区选中的数据清空
      this.form.city = null
      // 获取城市下的地区赋值给areaOptions
      this.areaArr = getArea(cityName)
    },
    // 每页显示的数据条数发生了变化
    handleSizeChange (val) {
      this.form.page = 1
      this.form.pagesize = val
      console.log(val)
      console.log(this.form.pagesize)
      this.getList()
    },
    // 页码值发生了变化
    handleCurrentChange (val) {
      this.form.page = val
      console.log(this.form.page)
      this.getList()
    },
    // 获取数据列表
    async getList () {
      const { data } = await list(this.form)
      console.log(data)
      this.questions = data.items
      this.total = data.counts
    },
    // 预览操作
    view (questionInfo) {
      this.questionInfo = questionInfo
      this.$nextTick(() => {
        this.$refs.questionPreview.open()
      })
    },
    // 删除操作
    async del (row) {
      // 询问用户是否要删除
      const confirmResult = await this.$confirm(
        '此操作将永久删除该题目, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      // 取消了删除
      if (confirmResult !== 'confirm') return this.$message.info('已取消操作')
      await remove(row)
      this.$message.success('删除分类成功！')
      if (this.questions.length === 1 && this.form.page > 1) {
        this.form.page--
      }
      this.getList()
    },
    // 添加操作
    async check (row) {
      // 询问用户是否要添加
      const confirmResult = await this.$confirm(
        '是否将该题目加入精选！',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      // 取消了添加
      if (confirmResult !== 'confirm') return this.$message.info('已取消操作')
      await choiceAdd({ id: row.id, choiceState: 1 })
      this.$message.success('添加成功！')
      // 重新渲染
      this.getList()
    }, // 搜索
    search () {
      this.form.page = 1
      console.log(this.form.page)
      this.getList()
    }
  },
  async created () {
    // 学科
    const { data: subject } = await subjectList()
    this.subjectArr = subject
    console.log(this.subjectArr)
    // 用户
    const { data: user } = await userList()
    this.userArr = user
    console.log(this.userArr)
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.question-container {
  padding: 0 10px;
  margin: 10px 0;
}
.btn_wrapper {
  margin-bottom: 15px;
  text-align: right;
}
</style>
